<template>
  <div class="test-form-controls">
    <h1>表单控件测试页面2 - 元数据拖拽布局</h1>
    
    <div class="container">
      <div class="metadata-panel">
        <h2>元数据列表</h2>
        <el-table :data="metadataList" border style="width: 100%">
          <el-table-column prop="ColName" label="列名" />
          <el-table-column prop="ColDescribe" label="描述" />
          <el-table-column prop="DataType" label="数据类型" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button 
                size="small" 
                @click="addToLayout(scope.row)"
              >添加到布局</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="layout-panel">
        <h2>布局区域</h2>
        <div class="layout-container">
          <template v-for="(item, index) in layoutItems" :key="index">
            <component 
              :is="getComponentByType(item.DataType)"
              v-model="item.value"
              :label="item.ColDescribe"
              class="draggable-item"
            />
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive } from 'vue'
import IntControl from '@/components/form-controls/IntControl.vue'
import DecimalControl from '@/components/form-controls/DecimalControl.vue'
import DateControl from '@/components/form-controls/DateControl.vue'
import DatetimeControl from '@/components/form-controls/DatetimeControl.vue'
import DialogSelectControl from '@/components/form-controls/DialogSelectControl.vue'
import EnumControl from '@/components/form-controls/EnumControl.vue'
import BoolControl from '@/components/form-controls/BoolControl.vue'
import SingleSelectControl from '@/components/form-controls/SingleSelectControl.vue'
import MultiSelectControl from '@/components/form-controls/MultiSelectControl.vue'

export default defineComponent({
  name: 'TestFormControls2',
  components: {
    IntControl,
    DecimalControl,
    DateControl,
    DatetimeControl,
    DialogSelectControl,
    EnumControl,
    BoolControl,
    SingleSelectControl,
    MultiSelectControl
  },
  setup() {
    const metadataList = reactive([
      {
        ColName: 'username',
        ColDescribe: '用户名',
        DataType: 'string',
        IsVisible: true,
        IsEnable: true,
        IsReadOnly: false
      },
      {
        ColName: 'age',
        ColDescribe: '年龄',
        DataType: 'number',
        IsVisible: true,
        IsEnable: true,
        IsReadOnly: false
      },
      {
        ColName: 'birthday',
        ColDescribe: '生日',
        DataType: 'date',
        Format: 'YYYY-MM-DD',
        IsVisible: true,
        IsEnable: true,
        IsReadOnly: false
      },
      {
        ColName: 'createTime',
        ColDescribe: '创建时间',
        DataType: 'datetime',
        Format: 'YYYY-MM-DD HH:mm:ss',
        IsVisible: true,
        IsEnable: true,
        IsReadOnly: false
      },
      {
        ColName: 'isActive',
        ColDescribe: '是否激活',
        DataType: 'boolean',
        IsVisible: true,
        IsEnable: true,
        IsReadOnly: false
      }
    ])

    const layoutItems = reactive([])

    const getComponentByType = (type) => {
      switch (type) {
        case 'number': return 'IntControl'
        case 'decimal': return 'DecimalControl'
        case 'date': return 'DateControl'
        case 'datetime': return 'DatetimeControl'
        case 'boolean': return 'BoolControl'
        case 'enum': return 'EnumControl'
        default: return 'IntControl'
      }
    }

    const addToLayout = (metadata) => {
      layoutItems.push({
        ...metadata,
        value: getDefaultValue(metadata.DataType)
      })
    }

    const getDefaultValue = (type) => {
      switch (type) {
        case 'number': return 0
        case 'decimal': return 0.0
        case 'date':
        case 'datetime': return ''
        case 'boolean': return false
        case 'enum': return ''
        default: return ''
      }
    }

    return {
      metadataList,
      layoutItems,
      getComponentByType,
      addToLayout
    }
  }
})
</script>

<style scoped>
.test-form-controls {
  padding: 20px;
}

.container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.metadata-panel {
  flex: 1;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 4px;
}

.layout-panel {
  flex: 2;
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 4px;
}

.layout-container {
  min-height: 300px;
  padding: 10px;
}

.draggable-item {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px dashed #ddd;
  background-color: #f9f9f9;
}
</style>